<template>
  <div class="login-wrap">
    <el-form class="login-container" :model="form" label-width="60px">
      <h1 class="title">用户登录</h1>
      <el-form-item label="账  号">
        <el-input
          type="text"
          v-model="Account"
          placeholder="登录账号"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密  码">
        <el-input
          type="password"
          v-model="Password"
          placeholder="登录密码"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="dosubmit()">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from '@/api/session.js'
import { getUserList } from '@/api/user.js'
import { setUserInfo } from '@/untils'

export default {
  name: 'Login',
  data() {
    return {
      Account: '',
      Password: ''
    }
  },
  mounted() {},
  methods: {
    dosubmit: function () {
      let params = {
        Account: this.Account,
        Password: this.Password
      }
      login(params).then((res) => {
        if (res) {
          let bearer = res.accessToken
          localStorage.setItem('token', bearer)
          setUserInfo(res.user)
          this.$router.push('/chat')
        }
      })
    }
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>